/* Scss Document */
/*全局样式.开始*/
html{
	height: 100%;
}
body {
	height: 100%;
    color: #282828;
    font-size: 14px;
    font-family: "Microsoft YaHei","微软雅黑,Arial","PingFang SC","Helvetica Neue",Helvetica,"Hiragino Sans GB","sans-serif";
	background: #f9f9f9;
}
button,input,select,textarea {
    font: 14px Verdana,Helvetica,Arial,sans-serif;
}
li,ol,ul,dl,dt,dd {
    list-style: none;
}
blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
	color: #555;
	text-decoration: none;
	&:hover {
		text-decoration: none;
	}
}
[v-cloak] {
	display: none;
}
.wrapper{
	position: relative;
	margin: 0 auto;
    width: 1200px;
	height: 100%;
}
.location{
	margin-top: 30px;
}
.pager-box{
	text-align: center;
	.el-pagination{
		margin-top: 20px;
	}
}
.payer-box{
	display: block;
	width: 800px;
	height: 450px;
	margin-top: 20px;
	position: relative;
	background: #000;
	border-radius: 3px;
	box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
	overflow: hidden;
}
.ntitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	.h3{
		display: inline-flex;
		align-items: center;
		color: #282828;
		font-size: 22px;
		&::before {
			content: "";
			display: inline-block;
			margin: auto 5px auto 0;
			width: 5px;
			height: 20px;
			background: #e93423;
			border-radius: 0 6px 6px 0;
			overflow: hidden;
		}
		.desc{
			margin: 7px 0 0 6px;
			color: #8b8b8b;
			font-size: 14px;
			line-height: 1;
		}
	}
	.more{
		padding: 0 10px;
		color: #818181;
		font-size: 12px;
		line-height: 24px;
		border: 1px solid #c6c6c6;
		border-radius: 3px;
		cursor: pointer;
		.icon{
			font-size: 12px;
		}
	}
}
.stitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.h3{
		display: flex;
		align-items: baseline;
		color: #333;
		font-size: 22px;
		font-weight: 700;
		.red{
			color: #e93323;
		}
		.info{
			margin-left: 10px;
			color: #8b8b8b;
			font-size: 14px;
			font-weight: 500;
			line-height: 1;
		}
	}
	.more{
		width: 19px;
		height: 19px;
		line-height: 19px;
		text-align: center;
		border: 1.5px solid #e93323;
		border-radius: 100%;
		.icon{
			font-size: 12px;
		}
	}
}
.ftitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	border-bottom: 1px solid #ededed;
    box-sizing: border-box;
	.h5{
		color: #333;
		font-size: 18px;
		font-weight: 500;
	}
	.more{
		width: 18px;
		height: 18px;
		color: #818181;
		text-align: center;
		border-radius: 50%;
		border: 1px solid #c6c6c6;
		box-sizing: border-box;
		.icon{
			display: block;
			font-size: 12px;
			line-height: 18px;
		}
	}
}
.ctitle{
	display: block;
    position: relative;
	margin-top: 54px;
	.title{
		color: #333;
		font-size: 22px;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		&::before,&::after{
			content: "";
			display: block;
			width: 40%;
			height: 1.5px;
			border-radius: 2px;
			opacity: .8;
		}
		&::before{
			margin: 0 20px 0 0;
			background: linear-gradient(to left,rgba(232,232,232,1),rgba(232,232,232,1),rgba(232,232,232,0));
		}
		&::after{
			margin: 0 0 0 20px;
			background: linear-gradient(to right,rgba(232,232,232,1),rgba(232,232,232,1),rgba(232,232,232,0));
		}
	}
}
/*全局样式.结束*/

/*页面头部.开始*/
.header-top{
	width: 100%;
    height: 40px;
	min-width: 1200px;
	color: #b4b4b4;
    font-size: 12px;
    background: #282828;
	.wrapper{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left-box,.right-box{
		a{
			position: relative;
			color: #b4b4b4;
			margin: 0 8px;
			&:hover{
				color: #fff;
			}
			&::before{
				position: absolute;
				content: " ";
				width: 1px;
				height: 10px;
				background-color: hsla(0,0%,100%,.11);
				left: -10px;
				top: 50%;
				margin-top: -5px;
			}
			&:first-child{
				&::before{
					display: none;
				}
			}
			.icon{
				margin-right: 3px;
				font-size: 12px;
			}
		}
	}
}
.index-header{
	margin: 0 auto;
	min-width: 1200px;
    height: 120px;
    background: #fff;
	.wrapper{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo{
		width: 180px;
		img{
			max-width: 180px;
		}
	}
	.nav-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		a{
			margin: 0 20px;
			color: #666;
			font-size: 16px;
		}
	}
	.search-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 350px;
		height: 40px;
		border: 2px solid #e93323;
		border-radius: 5px;
		.select-box{
			border-right: 1px solid #cfcfcf;
			border-radius: 5px 0 0 5px;
			.select{
				width: 75px;
				color: #999;
				font-size: 13px;
				border: none;
				outline: none;
				cursor: pointer;
				.el-input__inner{
					border: none;
				}
			}
		}
		.input-box{
			flex-grow: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			height: 100%;
			.icon{
				position: absolute;
				left: 14px;
				top: 10px;
				margin-right: 5px;
				color: #c1c1c1;
				font-size: 15px;
			}
			.input{
				padding-left: 36px;
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				font-size: 13px;
				box-sizing: border-box;
				border-radius: 5px 0 0 5px;
			}
		}
		.btn{
			width: 90px;
			height: 100%;
			text-align: center;
			line-height: 36px;
			color: #fff;
			font-size: 14px;
			font-weight: 600;
			background-color: #e93323;
			cursor: pointer;
		}
	}
}
.goods-header{
	margin: 0 auto;
	min-width: 1200px;
    height: 120px;
    background: #fff;
	.wrapper{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left-box{
		img{
			max-width: 224px;
		}
	}
	.center-box{
		position: relative;
		width: 640px;
		height: 40px;
		border: 2px solid #e93323;
		border-radius: 5px;
		cursor: pointer;
		.search-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.icon{
				position: absolute;
				left: 14px;
				top: 10px;
				margin-right: 5px;
				color: #c1c1c1;
				font-size: 15px;
			}
			.input{
				padding-left: 36px;
				width: 548px;
				height: 100%;
				border: none;
				outline: none;
				font-size: 13px;
				border-radius: 5px 0 0 5px;
			}
			.btn{
				width: 90px;
				height: 100%;
				text-align: center;
				line-height: 36px;
				color: #fff;
				font-weight: 600;
				background-color: #e93323;
			}
		}
		.hot-box{
			position: absolute;
			bottom: -35px;
			left: 0;
			width: 560px;
			height: 20px;
			overflow: hidden;
			.text{
				display: inline-block;
				padding: 0 10px;
				color: #999;
			}
		}
	}
	.right-box{
		a{
			display: block;
			width: 118px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: #e93323;
			cursor: pointer;
			border-radius: 5px;
			border: 1px solid #ddd;
			.icon{
				margin-right: 7px;
			}
		}
	}
}
/*页面头部.结束*/

/*页面内容.开始*/
.slider-nav{
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	.list-box{
		display: flex;
		justify-content: flex-start;
		margin-top: 20px;
		.title{
			flex-shrink: 0;
			min-width: 60px;
			color: #999;
			font-size: 16px;
			line-height: 38px;
		}
		.list{
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
			flex-flow: row wrap;
			position: relative;
			margin-top: -15px;
			overflow: hidden;
			a{
				margin: 15px 0 0 20px;
				padding: 10px 20px;
				max-width: 120px;
				color: #282828;
				font-size: 16px;
				line-height: 1;
				text-align: center;
				background: #fff;
				border-radius: 3px;
				box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
				&.active,&:hover{
					color: #fff;
					background: #e93323;
				}
			}
		}
	}
}
.slider-box{
	margin-top: 20px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
	overflow: hidden;
}
.news-focus{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.banner{
		position: relative;
		width: 590px;
		height: 350px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.swiper-container{
			height: 350px;
			.swiper-pagination {
				bottom: 10px;
				text-align: right;
				padding-right: 20px;
			}
			.swiper-pagination-bullet {
				background: #fff;
				opacity: .8;
				width: 6px;
				height: 6px;
			}
			.swiper-pagination-bullet-active {
				opacity: 1;
				width: 20px;
				height: 6px;
				border-radius: 10px;
				background: #ffd53f;
			}
		}
		.img-box{
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				min-height: 100%;
			}
		}
		.txt-box{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.01);
			span{
				position: absolute;
				left: 0;
				bottom: 20px;
				right: 0;
				display: block;
				padding: 5px 20px;
				color: #fff;
				font-size: 18px;
				line-height: 28px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
	.img-list{
		width: 285px;
		margin-left: 20px;
	}
	.txt-list{
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		padding: 0 0 20px 0;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		width: 285px;
		background: #fff;
		border-radius: 3px;
		.list-box{
			margin-top: 20px;
			padding: 0 20px;
			.title{
				color: #333;
				font-size: 14px;
				line-height: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				.label{
					display: inline-block;
					margin-right: 5px;
					padding: 3px 5px;
					color: #fff;
					font-size: 12px;
					background: #e93323;
					line-height: 1;
					border-radius: 2px;
					vertical-align: middle;
				}
			}
			.info{
				margin-top: 5px;
				line-height: 1;
				color: #9DA0A5;
				font-size: 12px;
				.line{
					&::before{
						content: "·";
						display: inline-block;
					}
				}
			}
		}
	}
}
.news-index{
	display: flex;
    flex-flow: row wrap;
    margin: 0 0 0 -20px;
    overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 20px 0 0 20px;
		padding: 20px;
		width: 590px;
		background: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.left-box{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.title{
				color: #282828;
				font-size: 18px;
				line-height: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.info{
				display: block;
				margin-top: 15px;
				color: #999;
				font-size: 14px;
				height: 66px;
				line-height: 22px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.date{
				margin-top: 15px;
				color: #ccc;
				font-size: 12px;
				&::before{
					margin-right: 3px;
				}
			}
		}
		.img-box{
			flex-shrink: 0;
			position: relative;
			margin-left: 20px;
			width: 192px;
			height: 128px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
	}
}
.news-hot{
	padding: 0 20px 20px 20px;
	.list-box{
		position: relative;
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		&:nth-child(1),&:nth-child(2){
			.txt-box{
				.title{
					margin-left: 0;
				}
			}
		}
		.index{
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			padding: 5px;
			line-height: 1;
			color: #fff;
			font-size: 10px;
			text-align: center;
			border-radius: 5px;
			background: #e93323;
			z-index: 1;
		}
		.img-box{
			flex-shrink: 0;
			position: relative;
			margin-right: 15px;
			width: 128px;
			height: 90px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				min-height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
		.txt-box{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.title{
				margin-left: 30px;
				color: #282828;
				font-size: 15px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.text{
				margin-top: 10px;
				color: #999;
				font-size: 12px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.info{
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				.icon{
					color: #999;
					font-size: 12px;
					&::before{
						margin-right: 3px;
					}
				}
			}
		}
		.view{
			color: #999;
			font-size: 12px;
			line-height: 22px;
			&::before{
				margin-right: 3px;
			}
		}
	}
}
.news-slider{
	display: flex;
    flex-flow: row wrap;
    margin: 0 0 0 -20px;
    overflow: hidden;
	.list-box{
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 20px 0 0 20px;
		padding: 20px;
		width: 390px;
		background: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.left-box{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.title{
				color: #282828;
				font-size: 15px;
				line-height: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.info{
				display: block;
				margin-top: 10px;
				color: #999;
				font-size: 12px;
				height: 40px;
				line-height: 20px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.date{
				margin-top: 10px;
				color: #ccc;
				font-size: 12px;
				&::before{
					margin-right: 3px;
				}
			}
		}
		.img-box{
			flex-shrink: 0;
			position: relative;
			margin-left: 20px;
			width: 128px;
			height: 90px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
	}
}
.news-list{
	display: flex;
    flex-flow: row wrap;
    overflow: hidden;
	.nodata{
		margin: 20px 0 0 0;
		padding: 20px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		width: 100%;
		color: #999;
		line-height: 100px;
		text-align: center;
	}
	.list-box{
		display: flex;
		justify-content: space-between;
		position: relative;
		margin: 20px 0 0 0;
		padding: 20px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.left-box{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.title{
				color: #282828;
				font-size: 18px;
				line-height: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.info{
				display: block;
				margin-top: 15px;
				color: #999;
				font-size: 14px;
				height: 66px;
				line-height: 22px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.date{
				margin-top: 15px;
				color: #ccc;
				font-size: 12px;
				&::before{
					margin-right: 3px;
				}
			}
		}
		.img-box{
			flex-shrink: 0;
			position: relative;
			margin-left: 20px;
			width: 192px;
			height: 128px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
	}
}
.video-index{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.left-box{
		position: relative;
		width: 590px;
		height: 350px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.item-box{
			width: 100%;
			height: 100%;
			cursor: pointer;
			&:hover{
				.img-box{
					>img,el-image{
						transform: scale(1.2);
					}
				}
			}
			.img-box{
				width: 100%;
				height: 100%;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
					min-height: 100%;
					transition: all 0.5s;
				}
			}
			.txt-box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.01);
				&:hover{
					.icon{
						opacity: .4;
					}
				}
				.text{
					position: absolute;
					left: 0;
					bottom: 20px;
					right: 0;
					display: block;
					padding: 5px 20px;
					color: #fff;
					font-size: 20px;
					line-height: 28px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
				.icon{
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -28px auto auto -28px;
					color: #fff;
					font-size: 56px;
					opacity: 0;
				}
			}
			
		}
	}
	.right-box{
		width: 590px;
	}
}
.video-list{
	margin-top: 20px;
}
.slider-banner{
	position: relative;
	height: 420px;
	.goods-index-container{
		height: 100%;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.swiper-button-prev {
			left: 241px;
		}
		.swiper-button-next {
			right: 17px;
		}
		.swiper-pagination {
			bottom: 14px;
			text-align: right;
			padding-right: 20px;
		}
		.swiper-pagination-bullet {
			width: 34px;
			height: 2px;
			background: #fff;
			opacity: .8;
			border-radius: 1px;
		}
		.swiper-pagination-bullet-active {
			opacity: 1;
			height: 3px;
			border-radius: 3px;
		}
	}
}
.goods-nav{
	background: #fff;
	.wrapper{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.item{
		display: inline-block;
		margin-right: 13px;
		padding: 11.5px 10px;
		color: #282828;
		font-size: 16px;
		font-weight: 400;
		cursor: pointer;
		min-width: 90px;
		text-align: center;
	}
	.category-wrap{
		position: relative;
		width: 224px;
		height: 44px;
		&:hover{
			.category-box{
				display: block;
			}
		}
		>.title{
			display: block;
			line-height: 44px;
			color: #fff;
			background: #e93323;
			text-align: center;
			cursor: pointer;
		}
		.category-box{
			display: none;
			&.active{
				display: block;
				.sort-box{
					background-color: rgba(0,0,0,.4);
				}
			}
		}
	}
	.category-box{
		position: absolute;
		top: 44px;
		left: 0;
		height: 420px;
		z-index: 9;
		.sort-box{
			padding: 14px 0;
			width: 224px;
			height: 100%;
			background-color: #222;
			color: #fff;
			.list-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 21px;
				height: 39px;
				cursor: pointer;
				&:hover{
					background: #e93323;
					.sort-con{
						display: block;
					}
				}
				.icon{
					font-size: 10px;
				}
				.title{
					width: 150px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.sort-con{
					position: absolute;
					top: 0;
					left: 224px;
					display: none;
					width: 664px;
					height: 100%;
					background-color: #fff;
					box-shadow: 5px 1px 10px rgba(0,0,0,0.05);
					border: 1px solid #f2f2f2;
					border-left: 0;
					border-right: 0;
					padding: 0 5px 20px 29px;
					.sort-li{
						display: flex;
						align-items: flex-start;
						flex-wrap: wrap;
						overflow-x: hidden;
						overflow-y: auto;
						padding-right: 29px;
						max-height: 400px;
						.item-box{
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: 30px;
							width: 33.33%;
							.img-box{
								position: relative;
								width: 68px;
								height: 68px;
								border: 1px solid #f5f5f5;
								border-radius: 5px;
								overflow: hidden;
								>img,.el-image{
									width: 100%;
									height: 100%;
								}
							}
							.title{
								flex: 1;
								margin-top: 14px;
								color: #282828;
								font-size: 14px;
								text-align: center;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
					.sort-er{
						overflow-x: hidden;
						overflow-y: auto;
						max-height: 400px;
						padding-top: 20px;
						.item-box{
							display: flex;
							margin-top: 10px;
							justify-content: space-between;
							.text{
								color: #282828;
								margin-left: 14px;
								width: 66px;
								font-weight: 700;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.list{
								width: 548px;
								a{
									display: inline-block;
									margin-bottom: 12px;
									padding: 0 20px;
									text-align: center;
									color: #888;
									font-size: 12px;
									cursor: pointer;
								}
							}
						}
					}
				}
			}
		}
	}
}
.goods-banner{
	margin-top: 30px;
    width: 1200px;
    height: 120px;
	overflow: hidden;
	img{
		width: 100%;
	}
}
.goods-speed{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	border-radius: 3px;
	overflow: hidden;
	.left-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 44px 0;
		width: 224px;
		height: 315px;
		color: #fff;
		background: #e93423;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.icon{
			font-size: 54px;
		}
		.text{
			margin-top: 20px;
			font-size: 22px;
		}
		.desc{
			margin-top: 10px;
			color: rgba(255,255,255,0.6);
			font-size: 12px;
		}
	}
	.right-box{
		position: relative;
		width: 976px;
		background: #fff;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.goods-speed-container{
			.swiper-slide{
				&::before{
					content: " ";
					position: absolute;
					width: 1px;
					height: 98px;
					background: #f4f4f4;
					top: 50%;
					left: 10px;
					margin-top: -49px;
				}
				&:first-child {
					&::before{
						display: none;
					}
				}
			}
			.list-box{
				display: inline-block;
				position: relative;
				margin-left: 20px;
				padding: 16px;
				width: 224px;
				&:hover{
					.picture{
						>img,.el-image{
							transform: scale(1.2);
						}
					}
				}
				.picture{
					width: 192px;
					height: 192px;
					overflow: hidden;
					>img,.el-image{
						width: 100%;
						height: 100%;
						transition: all 0.5s;
					}
				}
				.title{
					color: #282828;
					text-align: center;
					margin: 10px auto 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.price{
					display: block;
					margin-top: 6px;
					color: #e93323;
					font-size: 18px;
					font-weight: 700;
					line-height: 26px;
					height: 26px;
					.ot{
						display: inline-block;
						margin-left: 2px;
						color: #a3a3a3;
						font-size: 14px;
						font-weight: 300;
						text-decoration: line-through;
					}
				}
				.timer{
					margin-top: 6px;
					color: #282828;
					font-size: 13px;
					line-height: 24px;
					height: 24px;
					.text{
						color: #999;
					}
				}
			}
			.swiper-button-prev {
				&::after{
					display: none;
				}
				left: 0;
				background-image: url();
				width: 25px;
				height: 34px;
				background-size: 100% 100%;
			}
			.swiper-button-next {
				&::after{
					display: none;
				}
				right: 0;
				background-image: url();
				width: 25px;
				height: 34px;
				background-size: 100% 100%;
			}
		}
	}
}
.goods-chose{
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	.left-box{
		display: flex;
		justify-content: space-between;
		padding: 28px;
		width: 590px;
		height: 250px;
		background: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.txt-box{
			display: flex;
			flex-direction: column;
			width: 310px;
			.title{
				color: #282828;
				font-size: 18px;
				word-break: break-all;
				white-space: pre-wrap;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
				overflow: hidden;
			}
			.info{
				margin-top: 8px;
				color: #a3a3a3;
				font-size: 16px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.price{
				margin-top: 26px;
				color: #e93323;
				font-size: 20px;
				font-weight: 700;
			}
		}
		.img-box{
			width: 194px;
			height: 194px;
			overflow: hidden;
			>img,.el-image{
				width: 194px;
				height: 194px;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
	}
	.right-box{
		display: flex;
		flex-direction: column;
		position: relative;
		margin-left: 20px;
		padding: 28px;
		width: 285px;
		height: 250px;
		border-radius: 3px;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.title{
			font-size: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.price{
			color: #e93323;
			font-size: 20px;
			font-weight: 700;
			margin-top: 12px;
		}
		.img-box{
			position: absolute;
			right: 28px;
			bottom: 28px;
			width: 130px;
			height: 130px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
	}
}
.goods-recom{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.item-box{
		margin-left: 15px;
		padding: 26px 0;
		width: 390px;
		height: 400px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		&:first-child{
			margin-left: 0;
		}
		.stitle{
			padding: 0 27px;
		}
		.recom-list{
			margin-top: 32px;
			.swiper-slide{
				position: relative;
				top: 20px;
				display: block;
				width: 180px;
				height: 280px;
				margin-right: 15px;
				transition: all .3s ease;
				&.swiper-slide-active{
					top: 0;
					left: 0;
					img{
						width: 180px;
					}
					.txt-box{
						position: absolute;
						bottom: 0;
						width: 100%;
						text-align: center;
						opacity: 1;
					}
				}
				img{
					width: 160px;
				}
				.txt-box{
					display: flex;
					flex-direction: column;
					text-align: center;
					opacity: 0;
					.title{
						margin-bottom: 10px;
						color: #282828;
						font-size: 15px;
						line-height: 30px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price{
						color: #e93323;
						font-size: 14px;
						font-weight: 700;
						i{
							font-style: normal;
							font-size: 20px;
						}
					}
				}
			}
		}
		.brand-list{
			display: flex;
			flex-direction: column;
			margin-top: 30px;
			padding: 0 27px;
			.list-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14px;
				padding: 0 15px 0 20px;
				width: 100%;
				height: 136px;
				box-sizing: border-box;
				border-radius: 3px;
				background: #f1f5f9;
				.txt-box{
					display: flex;
					flex-direction: column;
					width: 183px;
					.title{
						color: #282828;
						font-size: 14px;
						line-height: 20px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.info{
						margin-top: 10px;
						color: #8b8b8b;
						font-size: 12px;
						line-height: 20px;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
						overflow: hidden;
						white-space: pre-wrap;
					}
				}
				.img-box{
					position: relative;
					width: 106px;
					height: 106px;
					overflow: hidden;
					>img,.el-image{
						width: 100%;
						height: 100%;
						border-radius: 3px;
						transition: all 0.5s;
						&:hover{
							transform: scale(1.2);
						}
					}
				}
			}
		}
		.top-list{
			display: flex;
			flex-direction: column;
			margin-top: 30px;
			padding: 0 27px;
			.list-box{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 15px;
				.num{
					width: 36px;
					height: 44px;
					img{
						width: 100%;
						height: 100%;
					}
				}
				.img-box{
					width: 84px;
					height: 84px;
					overflow: hidden;
					>img,.el-image{
						width: 100%;
						height: 100%;
						transition: all 0.5s;
						&:hover{
							transform: scale(1.2);
						}
					}
				}
				.title{
					width: 136px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					white-space: pre-wrap;
				}
			}
		}
	}
}
.goods-classify{
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	.left-box{
		flex-shrink: 0;
		margin-right: 20px;
		width: 224px;
		height: 640px;
		border-radius: 3px;
		overflow: hidden;
		>img,el-image{
			width: 100%;
			height: 100%;
		}
	}
	.right-box{
		flex-grow: 1;
		.goods-list{
			.list-box{
				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}
	}
}
.goods-index{
	margin-top: 20px;
}
.goods-list{
	display: flex;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	overflow: hidden;
	.nodata{
		margin: 20px 0 0 20px;
		padding: 30px;
		width: 100%;
		color: #999;
		text-align: center;
		line-height: 80px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
	}
	.list-box{
		width: 224px;
		padding: 16px;
		background: #fff;
		margin: 20px 0 0 20px;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		cursor: pointer;
		&:hover{
			box-shadow: 0px 3px 20px rgba(0,0,0,0.06);
			.img-box{
				>img,.el-image{
					transform: scale(1.2);
				}
			}
		}
		.img-box{
			width: 192px;
			height: 192px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
			}
		}
		.title{
			margin-top: 8px;
			color: #666;
			font-size: 14px;
			height: 40px;
			line-height: 22px;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			white-space: pre-wrap;
			.label{
				display: inline-block;
				margin-right: 5px;
				padding: 0 5px;
				color: #fff;
				font-size: 12px;
				background: #e93323;
				height: 18px;
				line-height: 18px;
				text-align: center;
				border-radius: 2px;
			}
		}
		.price{
			display: block;
			margin-top: 12px;
			color: #e93323;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			height: 26px;
			span{
				font-size: 14px;
			}
			.ot{
				display: inline-block;
				margin-left: 2px;
				color: #a3a3a3;
				font-size: 14px;
				font-weight: 300;
				text-decoration: line-through;
			}
		}
		.point{
			display: block;
			margin-top: 12px;
			color: #e93323;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			height: 26px;
			.icon{
				color: #999;
				font-size: 14px;
				font-weight: normal;
				margin-right: 5px;
			}
			.ot{
				display: inline-block;
				margin-left: 2px;
				color: #a3a3a3;
				font-size: 14px;
				font-weight: 300;
				text-decoration: line-through;
			}
		}
		.desc{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10px;
			color: #aaa;
			font-size: 12px;
		}
		.timer{
			margin-top: 6px;
			color: #282828;
			font-size: 13px;
			line-height: 24px;
			height: 24px;
			.text{
				color: #999;
			}
		}
	}
}
.goods-info{
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
	.left-box{
		position: relative;
		width: 400px;
		background: #fff;
		border-radius: 3px 0 0 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.swiper-gallery{
			position: relative;
			width: 100%;
			height: 400px;
			.swiper-slide{
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.swiper-thumbs{
			position: relative;
			margin: 20px 15px;
			.swiper-container{
				padding: 0 10px;
			}
			.swiper-button-prev{
				left: 0;
				top: 0;
				width: 16px;
				height: 100%;
				margin-top: 0;
				&::after{
					color: #999;
					font-size: 20px;
					font-weight: bold;
				}
			}
			.swiper-button-next{
				top: 0;
				right: 0;
				width: 16px;
				height: 100%;
				margin-top: 0;
				&::after{
					color: #999;
					font-size: 20px;
					font-weight: bold;
				}
			}
			.swiper-slide{
				position: relative;
				margin: 0 8px;
				width: 65px;
				height: 65px;
				box-sizing: border-box;
				border: 2px solid #f5f5f5;
				overflow: hidden;
				cursor: pointer;
				&.swiper-slide-thumb-active{
					border-color: #e93323;
				}
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.btn-box{
			margin: 0 30px 30px 0;
			.icon{
				margin-left: 30px;
				color: #4b4b4b;
				font-size: 14px;
				line-height: 20px;
				cursor: pointer;
				&::before{
					margin-right: 5px;
				}
			}
		}
	}
	.right-box{
		display: flex;
		flex-direction: column;
		padding: 30px;
		width: 800px;
		background: #fff;
		border-radius: 0 3px 3px 0;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.gtitle{
			font-size: 20px;
			font-weight: 600;
			line-height: 1.5em;
		}
		.stitle{
			margin-top: 10px;
			color: #e4393c;
			font-size: 14px;
			line-height: 1.5em;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.info-box{
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			padding: 10px 0;
			color: #fff;
			background: #e93323;
			.price-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20px;
				.del{
					margin-bottom: 5px;
					color: #f18282;
					font-size: 12px;
					text-decoration: line-through;
				}
				.price{
					font-size: 24px;
					line-height: 1;
					font-weight: 600;
					&::before{
						content: "￥";
						font-size: 22px;
						font-weight: 500;
					}
				}
			}
			.point-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 20px;
				.del{
					margin-bottom: 5px;
					color: #f18282;
					font-size: 12px;
					text-decoration: line-through;
				}
				.text{
					font-size: 14px;
					line-height: 1;
					b{
						margin: 0 5px;
						font-size: 24px;
						font-weight: normal;
						line-height: 1;
						font-weight: 600;
					}
				}
			}
			.timer-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 20px;
				.title{
					color: #f18282;
				}
			}
			.sale-box{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				position: relative;
				padding: 0 20px;
				.num{
					margin-bottom: 3px;
					font-weight: 700;
					font-size: 18px;
				}
				.text{
					font-size: 12px;
				}
				&::before{
					content: "";
					position: absolute;
					top: 12px;
					bottom: 10px;
					left: 0;
					width: 1px;
					border-left: 1px solid hsla(0,0%,100%,.24);
				}
			}
		}
		.promote-box{
			display: flex;
			flex-direction: column;
			padding: 20px 20px 0 20px;
			background: #f7f7f7;
			color: #5a5a5a;
			.list-box{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
				.title{
					width: 80px;
					color: #999;
				}
				.remark{
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					color: #727272;
					font-size: 12px;
					line-height: 20px;
				}
				.coupon{
					flex-grow: 1;
					margin-top: -10px;
					.item-warp{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 10px;
						.item-box{
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #fff;
							border: 1px solid #e93323;
							border-radius: 3px;
							box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
							.num{
								padding: 0 10px;
								font-size: 13px;
								height: 24px;
								line-height: 24px;
								background: #e93323;
							}
							.text{
								flex-grow: 1;
								padding: 0 10px;
								color: #e93323;
								font-size: 12px;
								line-height: 1;
							}
						}
						.info{
							flex-grow: 1;
							padding: 0 10px;
							color: #999;
							font-size: 12px;
						}
						.btn{
							color: #e93323;
							font-size: 12px;
							border-bottom: 1px solid #e93323;
							cursor: pointer;
						}
					}
				}
			}
		}
		.spec-list{
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			.list-box{
				display: flex;
				justify-content: flex-start;
				margin-bottom: 10px;
				.title{
					margin: 0 20px;
					width: 60px;
					line-height: 32px;
					color: #999;
				}
				.item-box{
					display: flex;
					justify-content: flex-start;
					position: relative;
					.text{
						margin: 0 10px 10px 0;
						padding: 10px 20px;
						font-size: 12px;
						line-height: 1;
						border-radius: 3px;
						border: 2px solid #f5f5f5;
						cursor: pointer;
						&.active{
							color: #fff;
							border-color: #e93323;
							background: #e93323;
						}
					}
					.pic{
						position: relative;
						margin: 0 10px 10px 0;
						border-radius: 3px;
						border: 2px solid #f5f5f5;
						box-sizing: border-box;
						width: 64px;
						height: 64px;
						cursor: pointer;
						&.active{
							border-color: #e93323;
						}
						img{
							width: 100%;
							height: 100%;
						}
					}
					.input{
						.desc{
							color: #999;
							margin-left: 10px;
						}
					}
				}
			}
		}
		.btn-box{
			margin: 20px 0 0 100px;
		}
	}
}
.goods-detail{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.left-box{
		width: 224px;
		.head-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20px;
			background: #fff;
			height: 51px;
			color: #333;
			font-size: 14px;
			border-bottom: 1px solid #ededed;
			border-radius: 3px 3px 0 0;
			.icon{
				margin-right: 5px;
				color: #999;
				font-size: 14px;
			}
		}
	}
	.right-box{
		width: 956px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.head-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1px solid #ededed;
			.item-box{
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				padding: 0 30px;
				height: 50px;
				color: #333;
				font-size: 14px;
				cursor: pointer;
				&:first-child{
					&::before{
						display: none;
					}
				}
				&::before{
					content: "";
					position: absolute;
					top: 18px;
					bottom: 18px;
					left: 0;
					width: 1px;
					border-left: 1px solid #d9d9d9;
				}
				&:hover{
					color: #e93323;
				}
				&.active{
					color: #e93323;
					font-weight: 600;
					&::after{
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						height: 2px;
						background: #e93323;
					}
				}
			}
		}
		.content{
			padding: 20px 30px;
			.param{
				display: flex;
				justify-content: flex-start;
				flex-flow: row wrap;
				align-items: center;
				position: relative;
				.text{
					margin: 5px 0;
					padding-right: 2%;
					width: 23%;
					color: #666;
					font-size: 12px;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.detail{
				padding-top: 20px; 
				p{
					margin: 10px 0;
					line-height: 1.8em;
				}
				img{
					display: block;
					width: 100%;
				}
			}
		}
	}
}
.goods-screen{
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	padding: 0 20px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		line-height: 50px;
		border-top: 1px solid #f5f5f5;
		&:first-child(1){
			border: none;
		}
		.title{
			color: #999;
			min-width: 45px;
		}
		.item-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.text{
				margin-left: 20px;
				padding: 5px 10px;
				line-height: 1;
				border-radius: 3px;
				cursor: pointer;
				&.active{
					color: #fff;
					background: #e93323;
					.icon{
						color: #e93323;
					}
				}
				.icon{
					font-size: 14px;
				}
			}
			.input{
				.el-input{
					width: 100px;
					.el-input-group__prepend{
						padding: 0 5px;
					}
				}
			}
			.line{
				margin: 0 5px;
				color: #ccc;
			}
			.btn{
				margin-left: 10px;
			}
		}
	}
}
.picture-hot{
	display: flex;
    justify-content: space-between;
	flex-flow: row wrap;
	padding: 20px 20px 0 20px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
	overflow: hidden;
	.list-box{
		display: flex;
		flex-direction: column;
		position: relative;
		margin-bottom: 20px;
		width: 160px;
		.img-box{
			width: 100%;
			height: 112px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
				&:hover{
					transform: scale(1.2);
				}
			}
		}
		.title{
			margin-top: 10px;
			color: #282828;
			font-size: 14px;
			line-height: 1;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
	}
}
.picture-list{
	display: flex;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	overflow: hidden;
	.nodata{
		margin: 20px 0 0 20px;
		padding: 30px;
		width: 100%;
		color: #999;
		text-align: center;
		line-height: 80px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
	}
	.list-box{
		position: relative;
		display: block;
		margin: 20px 0 0 20px;
		width: 285px;
		height: 165px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		cursor: pointer;
		&:hover{
			.img-box{
				>img,.el-image{
					transform: scale(1.2);
				}
			}
			.txt-box{
				.icon{
					opacity: .4;
				}
			}
		}
		.img-box{
			width: 100%;
			height: 100%;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
			}
		}
		.txt-box{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.01);
			.icon{
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -24px auto auto -24px;
				color: #fff;
				font-size: 48px;
				opacity: 0;
			}
			.text{
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				display: block;
				padding: 10px;
				color: #fff;
				font-size: 14px;
				line-height: 20px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
}
.photo-index{
	position: relative;
	margin-top: 20px;
	width: 100%;
	height: 390px;
    overflow: hidden;
	.list-box{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 285px;
		height: 185px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		cursor: pointer;
		&:nth-child(1){
			height: 390px;
		}
		&:nth-child(2){
			left: 305px;
		}
		&:nth-child(3){
			left: 610px;
		}
		&:nth-child(4){
			left: auto;
			right: 0;
		}
		&:nth-child(5){
			top: 205px;
			left: 305px;
			width: 590px;
		}
		&:nth-child(6){
			top: 205px;
			left: auto;
			right: 0;
		}
		&:hover{
			.txt-box{
				opacity: 1;
			}
			.img-box{
				>img,.el-image{
					transform: scale(1.2);
				}
			}
		}
		.img-box{
			width: 100%;
			height: 100%;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
			}
		}
		.txt-box{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.01);
			opacity: 0;
			.text{
				display: flex;
				flex-direction: column;
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				padding: 10px;
				color: #fff;
				font-size: 16px;
				line-height: 24px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
}
.photo-list{
	display: flex;
	flex-flow: row wrap;
	margin: 0 0 0 -20px;
	overflow: hidden;
	.nodata{
		margin: 20px 0 0 20px;
		padding: 30px;
		width: 100%;
		color: #999;
		text-align: center;
		line-height: 80px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
	}
	.list-box{
		position: relative;
		margin: 20px 0 0 20px;
		width: 285px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		cursor: pointer;
		overflow: hidden;
		&:hover{
			.img-box{
				>img,.el-image{
					transform: scale(1.2);
				}
			}	
		}
		.img-box{
			width: 100%;
			height: 285px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
			}
		}
		.like-box{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 50%;
			top: 254px;
			margin-left: -32px;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			box-shadow: 0 0 10px rgba(0,0,0,.2);
			background: rgba(255,255,255,0.7);
			overflow: hidden;
			.icon{
				margin-bottom: 5px;
				color: #e93423;
				font-size: 22px;
				line-height: 1;
			}
			.text{
				color: #e93423;;
				font-size: 12px;
				line-height: 1;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
		.txt-box{
			display: flex;
			flex-direction: column;
			padding: 38px 20px 20px 20px;
			text-align: center;
			.title{
				color: #666;
				font-size: 14px;
				height: 40px;
				line-height: 22px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				white-space: pre-wrap;
			}
			.date{
				margin-top: 12px;
				color: #ccc;
				font-size: 12px;
				line-height: 1;
				&::before{
					margin-right: 3px;
				}
			}
		}
	}
}
.down-index{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.left-box{
		position: relative;
		width: 590px;
		height: 350px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.item-box{
			width: 100%;
			height: 100%;
			cursor: pointer;
			&:hover{
				.img-box{
					>img,.el-image{
						transform: scale(1.2);
					}
				}
			}
			.img-box{
				width: 100%;
				height: 100%;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
					transition: all 0.5s;
				}
			}
			.txt-box{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.01);
				.text{
					position: absolute;
					left: 0;
					bottom: 20px;
					right: 0;
					display: block;
					padding: 5px 20px;
					color: #fff;
					font-size: 20px;
					line-height: 28px;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
			
		}
	}
	.right-box{
		width: 590px;
	}
}
.down-list{
	display: flex;
	flex-flow: row wrap;
	margin: 0 0 0 -20px;
	overflow: hidden;
	.nodata{
		margin: 20px 0 0 20px;
		padding: 30px;
		width: 100%;
		color: #999;
		text-align: center;
		line-height: 80px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
	}
	.list-box{
		position: relative;
		margin: 20px 0 0 20px;
		padding: 20px;
		width: 285px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		box-sizing: border-box;
		background: #fff;
		cursor: pointer;
		overflow: hidden;
		&:hover{
			.img-box{
				>img,.el-image{
					transform: scale(1.2);
				}
			}
		}
		.img-box{
			width: 100%;
			height: 245px;
			border-radius: 3px;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
				transition: all 0.5s;
			}
		}
		.txt-box{
			display: flex;
			flex-direction: column;
			.title{
				margin-top: 10px;
				color: #666;
				font-size: 14px;
				line-height: 22px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.info{
				margin-top: 10px;
				color: #999;
				font-size: 12px;
				height: 40px;
				line-height: 20px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				white-space: pre-wrap;
			}
			.date{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				color: #ccc;
				font-size: 12px;
				line-height: 1;
				.icon{
					font-size: 12px;
					&::before{
						margin-right: 3px;
					}
				}
				
			}
		}
	}
}
.content-box{
	display: flex;
	justify-content: space-between;
	.box-800{
		width: 800px;
	}
	.box-380{
		width: 380px;
	}
}
.detail-box{
	margin-top: 20px;
	padding: 30px 30px 20px;
	width: 100%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
	overflow: hidden;
	.h3{
		color: #282828;
		font-size: 20px;
		line-height: 38px;
	}
	.meta{
		margin-top: 10px;
		line-height: 1;
		color: #999;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		span{
			margin-right: 10px;
		}
		.icon{
			font-size: 14px;
			&::before{
				margin-right: 5px;
			}
			&.click{
				cursor: pointer;
			}
		}
	}
	.content{
		position: relative;
		margin-top: 30px;
		color: #333;
		font-size: 15px;
		line-height: 30px;
		p{
			margin: 10px 0;
		}
		img{
			max-width: 100%;
		}
	}
	.album-list{
		display: flex;
		justify-content: flex-start;
		flex-flow: row wrap;
		margin: 10px 0 0 -20px;
		overflow: hidden;
		.list-box{
			position: relative;
			margin: 20px 0 0 20px;
			.img-box{
				position: relative;
				width: 233px;
				height: 233px;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
				}
			}
			.txt-box{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 36px;
				background: rgba(0,0,0,0.1);
				.text{
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					display: block;
					padding: 10px;
					color: #fff;
					font-size: 12px;
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			
		}
	}
	.attach-list{
		display: flex;
		flex-direction: column;
		position: relative;
		margin-top: 10px;
		.list-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20px;
			padding: 15px;
			border: 1px solid #f0f0f0;
			border-radius: 3px;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			.left-box{
				display: flex;
				justify-content: flex-start;
				.icon{
					margin-right: 20px;
					color: #ccc;
					font-size: 40px;
				}
				.txt-box{
					.title{
						display: block;
						color: #282828;
						font-size: 14px;
						font-weight: 600;
						line-height: 20px;
					}
					.info{
						display: block;
						margin-top: 10px;
						color: #999;
						font-size: 12px;
						line-height: 1;
					}
				}
			}
		}
	}
}
.comment-box{
	margin-top: 20px;
	.comment-from{
		display: flex;
		justify-content: flex-start;
		.avatar-box{
			display: flex;
			justify-content: center;
			align-items: center;
			background: #fff;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			width: 50px;
			height: 50px;
			border-radius: 50%;
			overflow: hidden;
			>img,.el-image{
				width: 100%;
				height: 100%;
			}
			.icon{
				color: #999;
				font-size: 24px;
			}
		}
		.from-box{
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;
			position: relative;
			margin-left: 20px;
			height: 84px;
			.input{
				position: relative;
				display: block;
				padding: 10px;
				border: none;
				width: 100%;
				height: 100%;
				font-size: 14px;
				line-height: 24px;
				color: #4b4b4b;
				box-sizing: border-box;
				border: 2px solid #f0f0f0;
				border-right: none;
				background: #fff;
				.el-textarea{
					height: 100%;
				}
				textarea{
					width: 100%;
					height: 100%;
					border: none;
				}
			}
			.btn{
				width: 100px;
				height: 84px;
				line-height: 84px;
				color: #fff;
				font-weight: 600;
				text-align: center;
				background: #379be9;
				cursor: pointer;
				&:hover{
					background: #328bd1;
				}
			}
		}
	}
	.comment-list{
		.nodata{
			margin-top: 20px;
			padding: 20px;
			border-radius: 3px;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			background: #fafafa;
			color: #999;
			text-align: center;
			line-height: 80px;
		}
		.list-box{
			display: flex;
			flex-direction: column;
			margin-top: 20px;
			padding: 20px;
			border-radius: 3px;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			background: #fff;
			.head-box{
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					justify-content: flex-start;
					.avatar{
						width: 50px;
						height: 50px;
						border-radius: 50%;
						overflow: hidden;
						>img,.el-image{
							width: 100%;
							height: 100%;
						}
					}
					.meta{
						display: flex;
						flex-direction: column;
						margin-left: 20px;
						.name{
							color: #282828;
							font-size: 16px;
							font-weight: 600;
							line-height: 20px;
						}
						.time{
							margin-top: 10px;
							color: #999;
							font-size: 14px;
							line-height: 1;
						}
					}
				}
				.right{
					.icon{
						margin-left: 10px;
						color: #999;
						font-size: 14px;
						cursor: pointer;
						&::before{
							margin-right: 5px;
						}
					}
				}
			}
			.content{
				margin: 10px 0 0 70px;
				color: #4b4b4b;
				font-size: 14px;
				line-height: 24px;
			}
			.reply{
				margin: 10px 0 0 70px;
				padding: 12px;
				border-radius: 3px;
				color: #666;
				font-size: 14px;
				line-height: 24px;
				background: #f7f8fa;
				overflow: hidden;
				.label{
					margin-right: 3px;
					color: #999;
				}
				.meta{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 5px;
					.left{
						color: #ccc;
						font-size: 14px;
					}
					.right{
						.icon{
							margin-left: 10px;
							color: #999;
							font-size: 14px;
							cursor: pointer;
							&::before{
								margin-right: 5px;
							}
						}
					}
				}
			}
		}
	}
}
.evaluate-box{
	position: relative;
	padding: 20px 30px;
	.screen-bar{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.text{
			margin-right: 20px;
			padding: 10px 20px;
			color: #666;
			font-size: 14px;
			line-height: 1;
			background: #f7f7f7;
			border-radius: 3px;
			cursor: pointer;
			&:hover{
				color: #e93323;
			}
			&.active{
				color: #fff;
				background: #e93323;
			}
		}
	}
	.list-wrap{
		.list-box{
			margin-top: 20px;
			padding: 10px 0;
			border-top: 1px solid #f7f7f7;
			&:first-child{
				border-top: none;
			}
			.avatar-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.avatar{
						position: relative;
						width: 50px;
						height: 50px;
						border-radius: 50%;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
					.meta{
						display: flex;
						flex-direction: column;
						margin-left: 20px;
						.name{
							color: #282828;
							font-size: 16px;
							font-weight: 600;
							ine-height: 20px;
						}
						.time{
							margin-top: 10px;
							color: #999;
							font-size: 14px;
							line-height: 1;
						}
					}
				}
				.star{
					.icon{
						margin: 0 3px;
						color: #999;
						font-size: 16px;
						&.icon-star-full{
							color: #ff722b;
						}
					}
				}
			}
			.content-box{
				margin: 10px 0 0 70px;
				color: #4b4b4b;
				font-size: 14px;
				line-height: 24px;
			}
			.album-box{
				display: flex;
				justify-content: flex-start;
				flex-flow: row wrap;
				margin: 0 0 0 60px;
				.img-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10px 0 0 10px;
					background: #f7f8fa;
					width: 65px;
					height: 65px;
					box-sizing: border-box;
					border: 1px solid #f7f8fa;
					border-radius: 3px;
					overflow: hidden;
					cursor: pointer;
					>img,.el-image{
						width: 100%;
						height: 100;
					}
				}
			}
			.remark{
				display: flex;
				justify-content: space-between;
				margin: 10px 0 0 70px;
				color: #999;
				font-size: 12px;
				line-height: 18px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
	.nodata{
		margin-top: 20px;
		padding: 20px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		color: #999;
		text-align: center;
		line-height: 80px;
	}
}
.login-box{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.wrap-box{
		display: flex;
		justify-content: space-between;
		width: 950px;
	}
	.left-box{
		width: 550px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.tab-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 30px 50px;
			.text{
				flex-grow: 1;
				position: relative;
				margin-left: 20px;
				padding: 10px 20px;
				color: #999;
				font-size: 16px;
				line-height: 1;
				text-align: center;
				cursor: pointer;
				&:first-child{
					margin-left: 0;
					&::before{
						display: none;
					}
				}
				&::before{
					content: "";
					position: absolute;
					top: 10px;
					left: -10px;
					bottom: 10px;
					display: block;
					width: 1px;
					background: #ccc;
				}
				&.active{
					color: #e93323;
					font-weight: 600;
				}
			}
		}
		.el-form{
			padding: 0 50px;
			.btn{
				width: 100%;
			}
		}
		.foot-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 50px 30px 50px;
			.text{
				color: #323233;
				font-size: 14px;
				line-height: 1;
			}
		}
	}
	.right-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		margin-left: 20px;
		padding: 30px 50px;
		width: 380px;
		background: #fff;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.logo{
			text-align: center;
			img{
			}
		}
		.head-box{
			display: flex;
			flex-direction: column;
			text-align: center;
			.title{
				color: #323233;
				font-size: 22px;
				line-height: 34px;
			}
			.text{
				margin: 10px 0 20px;
				color: #666;
				font-size: 14px;
				line-height: 24px;
			}
		}
		.img-box{
			position: relative;
			margin-top: 20px;
			>img,el-image{
				width: 100%;
			}
		}
		.foot-box{
			margin: 20px 0 0 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.icon{
				color: #666;
				font-size: 14px;
				line-height: 1;
				&::before{
					margin-right: 5px;
				}
			}
			
		}
	}
}
.account-box{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.left-box{
		width: 224px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.head-box{
			text-align: center;
			border-bottom: 20px solid #f7f7f7;
			.img-box{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20px auto;
				width: 120px;
				height: 120px;
				border-radius: 50%;
				box-shadow: 0px 2px 30px rgba(0,0,0,0.06);
				background: #f3f3f3;
				overflow: hidden;
				.icon{
					color: #fff;
					font-size: 48px;
				}
				>img,.el-image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.name{
				margin: 0 20px;
				color: #323233;
				font-size: 17px;
				font-weight: 600;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.info{
				position: relative;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 20px;
				padding: 10px 0;
				background: #e93323;
				.text{
					position: relative;
					margin: 0 1%;
					padding: 6px 12px;
					width: 40%;
					color: #fff;
					font-size: 12px;
					line-height: 1;
					text-align: center;
					white-space: nowrap;
					text-overflow: ellipsis;
					cursor: pointer;
					overflow: hidden;
					&::before{
						margin-right: 3px;
					}
					&::after{
						content: "";
						position: absolute;
						top: 6px;
						bottom: 6px;
						left: 0;
						width: 1px;
						border-left: 1px solid #d9d9d9;
					}
					&:first-child{
						&::after{
							display: none;
						}
					}
				}
			}
		}
		.menu-box{
			display: flex;
			flex-direction: column;
			padding: 10px 0;
			.item-box{
				position: relative;
				margin: 10px 0;
				padding: 10px 30px;
				color: #666;
				font-size: 16px;
				line-height: 1;
				cursor: pointer;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				&:hover{
					color: #e93323;
				}
				&.active{
					color: #e93323;
					&::before{
						content: "";
						position: absolute;
						top: 7px;
						bottom: 7px;
						left: 0;
						width: 2px;
						background: #e93323;
					}
				}
				.icon{
					font-size: 15px;
				}
			}
		}
	}
	.right-box{
		width: 956px;
		background: #fff;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		overflow: hidden;
		.tab-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20px 30px 0 30px;
			border-bottom: 1px solid #ededed;
			.menu-box{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.item-box{
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					padding: 0 30px;
					height: 50px;
					color: #333;
					font-size: 14px;
					cursor: pointer;
					&:first-child{
						&::before{
							display: none;
						}
					}
					&::before{
						content: "";
						position: absolute;
						top: 18px;
						bottom: 18px;
						left: 0;
						width: 1px;
						border-left: 1px solid #d9d9d9;
					}
					&:hover{
						color: #e93323;
					}
					&.active{
						color: #e93323;
						font-weight: 600;
						&::after{
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							height: 2px;
							background: #e93323;
						}
					}
				}
			}
			.btn-box{
				.el-link{
					margin-right: 20px;
				}
			}
		}
		.content{
			position: relative;
			padding: 30px;
			overflow: hidden;
			.el-form,.el-table{
				border: 1px solid #f5f5f5;
				border-radius: 3px;
				box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			}
			.el-form{
				padding: 20px;
			}
			.nodata{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 50px;
				color: #999;
				font-size: 14px;
				.icon{
					margin-bottom: 20px;
					color: #ebebeb;
					font-size: 54px;
					line-height: 1;
				}
			}
		}
	}
	.index-box{
		width: 956px;
		.section-box{
			margin-bottom: 20px;
			background: #fff;
			border-radius: 3px;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			overflow: hidden;
			.title{
				padding: 0 30px;
				color: #333;
				font-size: 16px;
				line-height: 50px;
				border-bottom: 1px solid #ededed;
			}
			.content{
				position: relative;
				padding: 20px;
			}
		}
		.info-index{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20px;
			.avatar-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20px;
				width: 468px;
				background: #fff;
				border-radius: 3px;
				box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
				box-sizing: border-box;
				overflow: hidden;
				.img-box{
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					width: 120px;
					height: 120px;
					border-radius: 50%;
					box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
					background: #f3f3f3;
					overflow: hidden;
					>img,.el-image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
					>.icon{
						color: #fff;
						font-size: 64px;
					}
					.edit{
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(0,0,0,0.3);
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						cursor: pointer;
						.icon{
							color: rgba(255,255,255,0.8);
							font-size: 24px;
						}
					}
				}
				.txt-box{
					flex-grow: 1;
					margin-left: 20px;
					.item-box{
						display: flex;
						justify-content: space-between;
						padding: 5px 0;
						.title{
							flex-grow: 1;
						}
						.text{
							margin-right: 10px;
							color: #999;
						}
					}
				}
			}
			.num-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-left: 20px;
				padding: 20px;
				width: 224px;
				background: #fff;
				box-sizing: border-box;
				border-radius: 3px;
				box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
				overflow: hidden;
				.num{
					color: #e93323;
					font-size: 22px;
					font-weight: 600;
					line-height: 1;
				}
				.text{
					margin-top: 15px;
					font-size: 14px;
				}
			}
		}
		.order-icon{
			display: flex;
			justify-content: space-around;
			.item-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20px 30px;
				cursor: pointer;
				&:hover{
					color: #e93323;
				}
				.icon{
					font-size: 34px;
					line-height: 1;
				}
				.text{
					margin-top: 15px;
					font-size: 14px;
				}
			}
		}
		.list-wrap{
			display: flex;
			justify-content: space-between;
			flex-flow: row wrap;
			margin: -20px 0 0 -20px;
			overflow: hidden;
			.section-box{
				flex-grow: 1;
				margin: 20px 0 0 20px;
				width: calc(50% - 20px);
				.nodata{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					min-height: 120px;
					height: 100%;
					.icon{
						color: #ccc;
						font-size: 32px;
					}
					.text{
						margin-top: 20px;
						color: #999;
						font-size: 14px;
					}
				}
			}
			.txt-list{
				display: flex;
				flex-direction: column;
				margin: -10px 0;
				.list-box{
					display: flex;
					justify-content: space-between;
					align-items: baseline;
					padding: 10px 0;
					border-top: 1px solid #f3f3f3;
					&:first-child{
						border: none;
					}
					.left{
						flex-grow: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						h5{
							font-size: 14px;
							font-weight: 500;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						.time{
							margin-top: 5px;
							color: #999;
							font-size: 12px;
							&::before{
								margin-right: 3px;
							}
						}
					}
					.right{
						margin-left: 20px;
					}
				}
			}
		}
	}
}
.address-list{
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	overflow: hidden;
	.add-box{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20px 0 0 20px;
		width: 285px;
		height: 165px;
		border: 1px solid #f3f3f3;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		font-size: 16px;
		line-height: 1;
		cursor: pointer;
		.icon{
			margin-right: 5px;
			color: #999
		}
	}
	.list-box{
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 20px 0 0 20px;
		padding: 20px 20px 50px 20px;
		width: 285px;
		border: 1px solid #f3f3f3;
		border-radius: 3px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		&:hover{
			.edit-box{
				opacity: 1;
			}
		}
		.name{
			color: #282828;
			font-size: 16px;
		}
		.mobile{
			margin: 10px 0 5px;
			color: #666;
			font-size: 13px;
		}
		.address{
			color: #999;
			font-size: 14px;
			height: 40px;
			line-height: 20px;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			white-space: pre-wrap;
		}
		.label{
			position: absolute;
			top: 0;
			right: 0;
			padding: 5px 12px;
			color: #fff;
			font-size: 12px;
			line-height: 1;
			border-radius: 0 3px 0 3px;
			background: #e93323;
		}
		.edit-box{
			opacity: 0;
			display: flex;
			justify-content: space-between;
			position: absolute;
			right: 20px;
			bottom: 20px;
			color: #e93323;
			.text{
				margin-left: 5px;
				line-height: 20px;
				cursor: pointer;
			}
		}
	}
}
.ticket-list{
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	overflow: hidden;
	.list-wrap{
		position: relative;
		margin: 20px 0 0 20px;
		width: 438px;
		overflow: hidden;
		&::before{
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			left: -18px;
			margin-top: -15px;
			width: 30px;
			height: 30px;
			background: #fff;
			border: 1px solid #f3f3f3;
			border-radius: 30px;
			overflow: hidden;
			z-index: 1;
		}
	}
	.list-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 20px;
		border: 1px solid #f3f3f3;
		border-radius: 10px;
		box-sizing: border-box;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.price-box{
			.price{
				color: #f50;
				font-size: 24px;
				&::before{
					margin-right: 3px;
					content: '￥';
					font-size: 14px;
				}
			}
		}
		.txt-box{
			display: flex;
			flex-direction: column;
			flex-grow: 1;
			padding: 0 12px;
			line-height: 20px;
			.text{
				display: block;
				margin-bottom: 5px;
				color: #333;
				font-size: 16px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.time{
				display: block;
				padding-top: 5px;
				color: #999;
				font-size: 12px;
				line-height: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
		.btn-box{
			padding: 10px 0 10px 10px;
			color: #f50;
			font-size: 14px;
			border-left: 1px dotted rgba(255,85,0,.3);
			white-space: nowrap;
			text-overflow: ellipsis;
			.active{
				color: #ccc;
			}
		}
	}
}
.table-list{
	h4{
		font-size: 14px;
		font-weight: 500;
	}
	.price{
		margin: 5px 0;
		color: #e93323;
		font-weight: 600;
	}
	.date{
		color: #999;
		font-size: 13px;
	}
	.img-list{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.img-box{
			flex-shrink: 0;
			position: relative;
			margin-right: 20px;
			width: 84px;
			height: 84px;
			>img,.el-image{
				width: 100%;
			}
		}
		.txt-box{
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			.info{
				margin: 5px 0;
				color: #999;
				line-height: 20px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				white-space: pre-wrap;
			}
		}
	}
}
.cart-list{
	margin-top: 20px;
	.row-box{
		padding: 0 20px;
		box-sizing: border-box;
		min-width: 80px;
	}
	.row-center{
		text-align: center;
	}
	.row-check{
		width: 80px;
	}
	.row-info{
		width: 500px;
	}
	.row-num{
		width: 220px;
	}
	.row-amount{
		width: 220px;
	}
	.head-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 54px;
		background: #eee;
	}
	.list-wrap{
		border: 1px solid #efefef;
		background: #fff;
		.nodata{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 50px;
			color: #ccc;
			.icon{
				margin-bottom: 20px;
				color: #f0f0f0;
				font-size: 64px;
			}
		}
		.list-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 0;
			border-top: 1px dotted #e2e2e2;
			.del{
				color: #d0d0d0;
				font-size: 18px;
				cursor: pointer;
			}
			.row-amount{
				color: #e93323;
			}
			.goods-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.img-box{
					flex-shrink: 0;
					position: relative;
					margin-right: 20px;
					width: 96px;
					height: 96px;
					>img,.el-image{
						width: 100%;
						height: 100%;
					}
				}
				.txt-box{
					flex-grow: 1;
					display: flex;
					flex-direction: column;
					.title{
						height: 40px;
						line-height: 20px;
						word-break: break-all;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						white-space: pre-wrap;
					}
					.info{
						margin-top: 10px;
						color: #d0d0d0;
						font-size: 12px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.price{
						margin-top: 10px;
						color: #e93323;
						font-weight: 600;
						&::before{
							content: "￥";
							font-size: 12px;
						}
					}
				}
			}
		}
	}
	.foot-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		margin-top: 30px;
		background: #eee;
		height: 54px;
		.check-box{
			padding-left: 20px;
			.text{
				margin-left: 20px;
			}
		}
		.total-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.txt-box{
				font-size: 14px;
				.price{
					color: #e93323;
					font-size: 20px;
					font-weight: 600;
					&::before{
						content: "￥";
						font-size: 16px;
					}
				}
			}
			.btn-box{
				display: flex;
				justify-content: space-between;
				margin-left: 30px;
				.btn{
					display: flex;
					align-items: center;
					padding: 0 50px;
					color: #fff;
					font-size: 18px;
					background: #e93323;
					cursor: pointer;
					height: 54px;
				}
			}
		}
	}
}
.order-list{
	.list-box{
		margin-bottom: 20px;
		border: 1px solid #ececec;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		.head-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #f5f5f5;
			line-height: 1;
			.text{
				color: #e93323;
				margin-right: 5px;
			}
			.time{
				color: #999;
				font-size: 14px;
				&::before{
					margin-right: 5px;
				}
			}
			.state{
				color: #666;
				&.red{
					color: #e93323;
				}
			}
		}
		.item-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 20px;
			border-bottom: 1px solid #f5f5f5;
			.img-box{
				flex-shrink: 0;
				position: relative;
				margin-right: 20px;
				width: 96px;
				height: 96px;
				>img,.el-image{
					width: 100%;
					height: 100%;
				}
			}
			.txt-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				.text{
					font-size: 15px;
				}
				.info{
					margin-top: 10px;
					color: #aaa;
				}
				.price{
					margin-top: 10px;
					color: #e93323;
					font-size: 20px;
					&::before{
						content: "￥";
						font-size: 14px;
					}
				}
			}
			.btn-box{
				flex-shrink: 1;
				width: 150px;
				.el-tag{
					min-width: 80px;
					text-align: center;
				}
			}
		}
		.total-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px 0 20px;
			.right{
				flex-grow: 1;
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				color: #666;
				.num{
					margin: 0 3px;
					font-weight: bold;
				}
				.price{
					margin: 0 3px;
					color: #e93323;
					font-size: 18px;
					font-weight: 600;
				}
			}
		}
		.btn-box{
			display: flex;
			justify-content: flex-end;
			padding: 20px;
		}
		.express-box{
			padding: 20px 20px 0 20px;
			.more-box{
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				text-align: center;
				color: #999;
				line-height: 1;
				cursor: pointer;
				.text{
					margin-bottom: 3px;
				}
				.icon{
					margin: auto;
					display: inline-block;
					width: 14px;
					height: 14px;
					color: #ccc;
					font-size: 14px;
					transform: rotate(-90deg);
				}
			}
		}
	}
}
.order-confirm{
	.screen-box{
		margin-top: 20px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		.nav-bar{
			display: block;
			padding: 0 20px;
			font-size: 16px;
			font-weight: 600;
			line-height: 54px;
			height: 54px;
			border-bottom: 1px solid #f3f3f3;
		}
		.address-list{
			margin: 0;
			padding-bottom: 20px;
			.list-box,.add-box{
				width: 275px;
				cursor: pointer;
			}
			.add-box{
				height: 135px;
			}
			.list-box{
				padding: 20px;
				&.active{
					border-color: #e93323;
					&::before{
						content: "\e612";
						font-family: "iconfont";
						display: block;
						position: absolute;
						right: -3px;
						bottom: -4px;
						color: #e93323;
						font-size: 30px;
					}
					
				}
			}
		}
	}
	.goods-box{
		margin: 0 30px;
		.list-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 0;
			border-top: 1px solid #f3f3f3;
			&:first-child{
				border: none;
			}
			.img-box{
				flex-shrink: 0;
				position: relative;
				margin-right: 20px;
				width: 96px;
				height: 96px;
				border-radius: 5px;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
			.txt-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				.title{
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.info{
					margin-top: 10px;
					color: #999;
					font-size: 13px;
					line-height: 1;
				}
				.price{
					margin-top: 10px;
					color: #e93323;
					font-size: 16px;
					&::before{
						content: "￥";
						font-size: 14px;
					}
				}
			}
			.num-box{
				width: 60px;
			}
		}
	}
	.item-box{
		display: flex;
		justify-content: space-between;
		margin: 20px 30px 0 30px;
		padding-top: 20px;
		border-top: 1px solid #f3f3f3;
		.left-box{
			flex-shrink: 0;
			width: 100px;
			color: #999;
		}
		.right-box{
			flex-grow: 1;
			color: #606266;
		}
	}
	.total-box{
		display: flex;
		justify-content: space-between;
		margin: 20px 30px;
		padding: 20px 0;
		.left-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.text{
				width: 100px;
				color: #999;
			}
		}
		.right-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.item{
				margin-right: 20px;
				color: #606266;
				.num{
					color: #333;
					font-size: 16px;
					font-weight: 500;
				}
				.price{
					margin-left: 5px;
					color: #e93323;
					font-size: 16px;
					font-weight: 500;
					&::before{
						content: "￥";
						font-size: 14px;
					}
				}
			}
		}
	}
	.amount-box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin: 20px 30px;
		padding: 20px;
		border-radius: 5px;
		background: #f7f7f7;
		.price{
			margin-left: 10px;
			color: #e93323;
			font-size: 20px;
			font-weight: 600;
			&::before{
				content: "￥";
				font-size: 14px;
			}
		}
	}
	.btn-box{
		display: flex;
		justify-content: flex-end;
		padding: 30px;
	}
}
.order-detail{
	margin-top: -20px;
	.head-box{
		margin-top: 20px;
		padding: 20px 0;
	}
	.screen-box{
		margin-top: 20px;
		border: 1px solid #f3f3f3;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		.nav-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			font-size: 16px;
			line-height: 54px;
			height: 54px;
			border-bottom: 1px solid #f3f3f3;
			.tip{
				color: #999;
				font-size: 14px;
				font-weight: 500;
			}
		}
	}
	.item-box{
		padding: 10px 20px;
		.item{
			display: flex;
			justify-content: space-between;
			padding: 10px 0;
			.left{
				width: 80px;
				color: #999;
			}
			.right{
				flex-grow: 1;
			}
		}
		.album{
			display: flex;
			justify-content: flex-start;
			flex-flow: row wrap;
			margin: -20px 0 0 -20px;
			.img-box{
				margin: 20px 0 0 20px;
				width: 112px;
				height: 112px;
				border-radius: 3px;
				box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
				>img,.el-image{
					width: 100%;
					height: 100%;
					border-radius: 3px;
				}
			}
		}
	}
	.goods-box{
		margin: 0 20px;
		.list-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 0;
			border-top: 1px solid #f3f3f3;
			&:first-child{
				border: none;
			}
			.img-box{
				flex-shrink: 0;
				position: relative;
				margin-right: 20px;
				width: 96px;
				height: 96px;
				border-radius: 5px;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
			.txt-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				.title{
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.info{
					margin-top: 10px;
					color: #999;
					font-size: 13px;
					line-height: 1;
				}
				.price{
					margin-top: 10px;
					color: #e93323;
					font-size: 16px;
					&::before{
						content: "￥";
						font-size: 14px;
					}
				}
			}
			.btn-box{
				flex-shrink: 1;
				width: 150px;
				.el-tag{
					min-width: 80px;
					text-align: center;
				}
			}
		}
	}
	.total-box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin: 20px 0;
		padding: 20px;
		.text{
			margin-left: 20px;
			.point,price{
				margin-left: 5px;
				color: #e93323;
				font-size: 16px;
			}
			.price{
				&::before{
					content: "￥";
					font-size: 14px;
				}
			}
		}
	}
	.amount-box{
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin: 20px 0;
		padding: 20px;
		border-radius: 5px;
		background: #f7f7f7;
		.price{
			margin-left: 10px;
			color: #e93323;
			font-size: 20px;
			font-weight: 600;
			&::before{
				content: "￥";
				font-size: 14px;
			}
		}
	}
	.btn-box{
		display: flex;
		justify-content: flex-end;
		padding: 30px 0;
	}
}
.order-form{
	margin-top: -20px;
	.list-box{
		margin-top: 20px;
		padding: 10px 20px;
		border: 1px solid #f3f3f3;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		.goods-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
			padding: 10px 0 20px;
			border-bottom: 1px solid #f5f5f5;
			.img-box{
				flex-shrink: 0;
				position: relative;
				margin-right: 20px;
				width: 96px;
				height: 96px;
				border-radius: 5px;
				overflow: hidden;
				>img,.el-image{
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
			.txt-box{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				.title{
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
				.info{
					margin-top: 10px;
					color: #999;
					font-size: 13px;
					line-height: 1;
				}
				.price{
					margin-top: 10px;
					color: #e93323;
					font-size: 16px;
					&::before{
						content: "￥";
						font-size: 14px;
					}
				}
			}
		}
		.form-box{
			.item-box{
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				.left{
					flex-shrink: 0;
					width: 80px;
					color: #999;
				}
				.right{
					flex-grow: 1;
				}
			}
		}
	}
	.btn-box{
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}
}
.upload-avatar{
	display: flex;
    justify-content: center;
	.avatar-box{
		position: relative;
		cursor: pointer;
		width: 180px;
		height: 180px;
		border-radius: 50%;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		img,.el-image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		i{
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -14px auto auto -14px;
			color: rgba(255,255,255,0.8);
			font-size: 28px;
			text-shadow: 0 0 5px rgba(0,0,0,0.2);
		}
	}
	.cropper-box{
		.img-box{
			width: 100%;
			height: 450px;
		}
		.btn-box{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10px;
			.el-upload{
				display: flex;
				align-items: center;
				margin-right: 10px;
			}
		}
	}
}
.upload-input{
	.up-control{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.el-input__inner {
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
		}
		.el-button {
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
		}
	}
	.img-preview{
		margin-top: 10px;
	}
}
.upload-album{
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	.img-box{
		position: relative;
		margin: 20px 0 0 20px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		border: 1px solid #DCDFE6;
		width: 112px;
		height: 112px;
		.close{
			position: absolute;
			right: -9px;
			top: -9px;
			color: #e93323;
			font-size: 18px;
			background: #fff;
			border-radius: 100%;
			cursor: pointer;
			z-index: 1;
		}
		.el-progress{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		>img,.el-image{
			width: 100%;
			height: 100%;
			border-radius: 3px;
		}
	}
	.add-box{
		.el-upload{
			position: relative;
			margin: 20px 0 0 20px;
			border-radius: 3px;
			box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
			background: #fff;
			border: 1px solid #DCDFE6;
			width: 112px;
			height: 112px;
			.btn-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0;
				height: 100%;
				.icon{
					color: #999;
					font-size: 24px;
				}
				.text{
					margin-top: 5px;
					color: #ccc;
					font-size: 12px;
					line-height: 1;
				}
			}
		}
	}
}
.upload-attach {
    .list-btn {
        margin-bottom: 20px;
    }
    .list-wrap {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin-right: -20px;
        .list-box {
            display: block;
            position: relative;
            margin: 0 20px 20px 0;
            width: 230px;
            flex-grow: 1;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            overflow: hidden;
            .img-box {
                display: block;
                float: left;
                margin: 5px 10px 5px 5px;
                color: #fff;
                font-size: 24px;
                width: 60px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background: #67C23A;
            }
            .info-box {
                margin: 5px;
                h3 {
                    margin-bottom: 10px;
                    color: #606266;
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 1.5em;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                dl {
                    display: flex;
                    justify-content: space-between;
					align-items: center;
                    margin-bottom: 5px;
                    dt {
                        color: #C0C4CC;
                        font-size: 12px;
                        line-height: 1em;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    dd {
                        display: flex;
                        justify-content: space-between;
                        color: #67C23A;
                        font-size: 20px;
                        height: 20px;
                        line-height: 20px;
                        span {
                            margin: 0 5px;
                            cursor: pointer;
                        }
                        span:hover {
                            color: #409EFF;
                        }
                    }
                }
            }
            .close {
                display: block;
                position: absolute;
                top: -20px;
                right: -20px;
                width: 40px;
                height: 40px;
                border-radius: 40px;
                color: #fff;
                font-size: 16px;
                background: #409EFF;
                cursor: pointer;
                overflow: hidden;
                i {
                    position: absolute;
                    display: block;
                    bottom: 4px;
                    left: 3px;
                }
            }
            .close:hover {
                background: #E6A23C;
            }
        }
    }
}
.payment-box{
	margin-top: 20px;
	.head-box{
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		overflow: hidden;
		.title{
			padding: 30px;
			color: #fff;
			font-size: 24px;
			line-height: 1;
			background: #e93323;
			.icon{
				font-size: 24px;
			}
		}
		.item-box{
			padding: 30px;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;
				font-size: 16px;
				.left{
					margin-right: 10px;
					width: 80px;
				}
				.right{
					flex-grow: 1;
					color: #666;
				}
				.price{
					margin: 0 2px;
					color: #e93323;
				}
			}
		}
		.btn-box{
			display: flex;
			justify-content: flex-end;
			padding: 30px;
		}
	}
	.screen-box{
		margin-top: 20px;
		border-radius: 3px;
		box-shadow: 0px 6px 35px rgba(0,0,0,0.02);
		background: #fff;
		.nav-bar{
			display: block;
			padding: 0 20px;
			font-size: 16px;
			font-weight: 600;
			line-height: 54px;
			height: 54px;
			border-bottom: 1px solid #f3f3f3;
		}
		.btn-box{
			display: flex;
			justify-content: flex-end;
			padding: 30px;
			.btn{
				padding: 15px 50px;
			}
		}
	}
}
.payment-list{
	display: flex;
	justify-content: flex-start;
	flex-flow: row wrap;
	margin: -20px 0 0 -20px;
	padding: 20px 30px;
	overflow: hidden;
	.list-box{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin: 20px 0 0 20px;
		padding: 20px;
		width: 210px;
		height: 86px;
		border: 1px solid #d4d4d4;
		cursor: pointer;
		&.active{
			border-color: #e93323;
			&::before{
				content: "\e612";
				font-family: "iconfont";
				display: block;
				position: absolute;
				right: -3px;
				bottom: -4px;
				color: #e93323;
				font-size: 30px;
			}
		}
		.icon{
			color: #fe9c01;
			font-size: 29px;
			margin-right: 11px;
			&.icon-weixin{
				color: #09bb07;
			}
			&.icon-alipay{
				color: #00aaea;
			}
		}
		.txt-box{
			display: flex;
			flex-direction: column;
			.name{
				color: #4e4e4e;
				font-size: 16px;
			}
			.text{
				margin-top: 6px;
				color: #969696;
				font-size: 14px;
			}
		}
	}
}
.native-box{
	display: flex;
    flex-direction: column;
    align-items: center;
	.img-box{
		position: relative;
		width: 298px;
		height: 298px;
		img,el-image{
			width: 100%;
			height: 100%;
		}
	}
	.text{
		margin-top: 20px;
		color: #999;
		&::before{
			margin-right: 3px;
		}
	}
}
.error-box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px;
	.num{
		color: #ccc;
		font-size: 180px;
		text-align: center;
	}
	.text{
		margin-top: 20px;
		color: #999;
	}
}
/*页面内容.结束*/

/*页面底部.开始*/
.footer{
	margin-top: 50px;
    background: #282828;
	min-width: 1200px;
	.delivery-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid #3a3030;
		li{
			display: flex;
			align-items: center;
			margin: 0 10px;
			.icon{
				margin-right: 14px;
				box-sizing: border-box;
				width: 40px;
				height: 40px;
				border: 2px solid rgba(255,255,255,0.8);
				border-radius: 50%;
				font-size: 23px;
				color: rgba(255,255,255,0.8);
				text-align: center;
				line-height: 36px;
			}
			.text{
				color: #fff;
				font-size: 14px
			}
		}
	}
	.link-box{
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
		.list-box{
			margin: 0 30px;
			.title{
				margin-bottom: 15px;
				color: #fff;
				font-size: 15px;
				font-weight: bold;
			}
			.list{
				display: flex;
				flex-direction: column;
				a,span{
					display: block;
					color: #ccc;
					line-height: 30px;
				}
			}
			.code{
				img{
					width: 98px;
					height: 98px;
					vertical-align: middle;
				}
				.text{
					margin-top: 10px;
					color: #999;
					.icon{
						margin-right: 2px;
						line-height: 1;
						vertical-align: middle;
					}
				}
			}
		}
	}
	.copyright{
		padding: 10px 0;
		border-top: 1px solid #3a3030;
		color: #ccc;
		font-size: 12px;
		line-height: 24px;
	}
}
/*页面底部.结束*/